<template>
  <div class="detail ace">
    <Header_h class="Header_h" v-if="pc == 1"></Header_h>
    <Header class="Header" v-else/>
    <NavItem class="NavItem" :class="type !=1?'':''"/>
    <div class="Breadcrumbs" v-if='type!=1'>
      <!-- <Breadcrumb /> -->
      <el-button size="mini" class="pubBtn3" style="margin-right:20px;" type="button" @click="$router.push(`${url}`)">
        <router-link :to='{path:`${url}`}'>返回</router-link>
      </el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item v-if="path == '/patentDetails' " :to='{path:`/patent`}'>我的专利管理</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/compdetail' " :to='{path:`/competitor`}'>监控竞争对手</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/cutDetails' " :to='{path:`/cutting`}'>产学情报研</el-breadcrumb-item>
        <el-breadcrumb-item :to='{path:`${url}`}'>专利列表</el-breadcrumb-item>
        <!-- <el-breadcrumb-item :to='{path:`${url}`}'>{{name}}</el-breadcrumb-item> -->
        <el-breadcrumb-item>专利详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-main :class='type !=1?"main-top":"main-top"'>
      <el-row type="flex" justify="space-between" class="title_pns">
        <el-col :xl="24" class="tio" v-if="data">
          <p class="v_span">{{data.pns}}</p>
          <p class="v_span2">{{data.tio}}</p>
        </el-col>
        <el-col :push="2" class="icon-tog mb" :xs="10">
          <i @click="show = true" class="iconfont icon-toggle"></i>
        </el-col>
        <el-col class="d_btn pc" style="text-align: right;">
          <el-button @click="copy" :data-clipboard-text="record" id="express_info_right" icon="iconfont icon-fenxiang">
            分享该专利
          </el-button>
          <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()">下载专利文件</el-button>
        </el-col>
      </el-row>
      <el-row class="infos" v-if="data.instructions" :gutter="10">
        <el-col :md="12">
          <div class="context">
            <p v-html="data.instructions" style="line-height:2;" class="context"></p>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <Service class='service' v-if='this.$route.meta.serve && type!=1'/>
    <div v-show="show" class="transition-box mb">
      <transition name="el-fade-in">
        <div v-show="show" class="el-zoom-in-top">
          <p @click="show = false" class="close">
            <i class="iconfont icon-guanbi"></i>
          </p>
          <ul class="mb_nav_li">
            <li @click="show = false">
              <router-link to="/detail">摘要</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/power">权力要求</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/instructions">说明书</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/drawings">附图</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/fullText">全文</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/kindred">同族信息</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/law">法律信息</router-link>
            </li>
          </ul>
          <el-row class="mt_btn" style="margin:0 10px;">
            <el-button @click="copy" id="express_info_right" :data-clipboard-text="record" type="warning">分享该专利
            </el-button>
            <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()" type="primary">下载专利文件</el-button>
          </el-row>
        </div>
      </transition>
    </div>
    <rightMenu @moveTo="moveTo"/>
    <QRCode v-if="QRCodeVisible"  :text="record"  :desc="data"  :dialogVisible="QRCodeVisible"  @val="val"  />
  </div>
</template>

<script>
  import {detail} from "@/api"
  import Header from "@/components/Header";
  import Header_h from "@/components/Header_h";
  import Breadcrumb from '@/components/Breadcrumb'
  import NavItem from '@/components/Navitem'
  import rightMenu from "@/components/web/rightMenu";
  import QRCode from '@/components/QRCode'
  import {setShare} from "@/wechat";

  import {VUE_APP_BASE_API, PAGE_BASE_URL} from "@/config"
  import Service from '@/components/Service'
  import 'element-ui/lib/theme-chalk/base.css';

  export default {
    components: {
      Header_h,
      Header,
      Breadcrumb,
      NavItem,
      Service,

      QRCode,
      rightMenu
    },
    data() {
      return {
        QRCodeVisible: false,
        data: [],
        url: '',
        name: '',
        path: '',
        show: false,
        // record: `${PAGE_BASE_URL}/#/detail?pid=${sessionStorage.getItem("pid")}&pc=${sessionStorage.getItem("pc")}`,
        record: '',
        type: sessionStorage.getItem("type"),
        pc: sessionStorage.getItem("pc"),
      }
    },
    async mounted() {
      try {
        this.url = sessionStorage.getItem("url")
        this.name = sessionStorage.getItem("name")
        const pid = sessionStorage.getItem("pid")
        let pc
        if (this.$store.getters.token) {
          pc = 0
        }else {
          pc=1
        }
        this.record = PAGE_BASE_URL + '#/detail?pid=' + (this.pid ? this.pid : sessionStorage.getItem('pid')) + '&type=1&pc=' + pc

        this.data = await detail({pid: pid, type: 3})
        this.path = sessionStorage.getItem("path")
        const desc = `政务走访管理系统`;
        const title = `[顺企中心]${this.data.tio}-${this.data.ano}`;
        setTimeout(() => {
          setShare({
            title, // 分享标题
            desc,
          });
        }, 1000);
      } catch (e) {
        this.$message.error(e.message)
      }

    },
    methods: {
      moveTo() {
        window.scrollTo(0, 0);
      },
      val(val) {
        this.QRCodeVisible = val
      },
      contactus(val) {
        this.dialogVisible = val
      },
      async dow() {
        try {
          const pid = sessionStorage.getItem("pid")
          // const res = await download(pid)
          // console.log(`${VUE_APP_BASE_API}/v1/index/download2?pid=${pid}`)
          window.open(`${VUE_APP_BASE_API}/v1/index/download2?pid=${pid}`)
        } catch (e) {
          this.$message(e.message);
        }
      },
      copy() {
        this.show = false
        let clipboard = new this.clipboard("#express_info_right");
        let that = this
        clipboard.on('success', function () {

          that.QRCodeVisible = true
          clipboard.destroy();
        });
        clipboard.on('error', function () {
          that.$message.error('复制失败');
        });
      }
    }
  }
</script>


<style lang="less" scoped>
  /deep/ .context p {
    line-height: 30px !important;
  }

  // .navitems{
  //   top:0 !important;
  // }
  .detail_large {
    margin-bottom: 44px;
  }

  .main-top {
    margin-top: 0;
  }

  .CN {
    font-size: 18px;
    font-weight: 400;
    color: rgba(42, 139, 45, 1);
    display: inline-block;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    display: inline-block;
    margin-left: 20px;
  }

  .detail_info {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
  }

  .detail_info_title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    margin: 20px 0;
  }

  .detail_info_last {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    margin: 20px 64px;
  }

  .img-box {
    width: 188px;
    // height:237px;
    border: 1px solid rgba(230, 233, 240, 1);
    border-radius: 5px;
    text-align: center;

    .img {
      width: 133px;
      height: 193px;
      object-fit: cover;
      margin: 10px 0;
    }
  }

  .detail_info_first_box {
    display: flex;
    align-items: center;
    // margin-bottom: 60px;
  }

  .tips {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    display: block;
    margin: 10px 0;
  }

  .detail_head_title {
    width: 143px;
  }

  .detail_info_patent {
    // height:50px;
    // margin:0 0 22px 0;
    margin-bottom: 20px;
    margin-left: 64px;
    width: 480px;
  }

  .detail_head_context {
    width: 143px;
    margin-bottom: 20px;
  }

  .v_span {
    font-size: 18px;
    font-weight: 400;
    color: rgba(42, 139, 45, 1);
  }

  .v_span2 {
    font-size: 18px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    padding-left: 20px;
  }

  .infos {
    margin-top: 37px;
  }

  .pc {
    display: block;
  }

  .mb {
    display: none;
  }

  @media (max-width: 750px) {
    .Breadcrumbs, .NavItem, .Header, .service {
      display: none;
    }

    .main-top {
      width: 100%;
      margin-left: 0 !important;
      padding-bottom: 0;
      top: 0;
    }

    .pc {
      display: none;
    }

    .mb {
      display: block;
    }

    .detail_info_title {
      margin: 15px 0;
    }

    .detail_info_last {
      margin: 15px 0;
    }

    .infos {
      margin: 10px 0 0 0;
    }

    .detail_info {
      margin-bottom: 30px;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      width: 100%;
    }

    .detail_info_first_box {
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
    }

    .detail_head_title {
      width: auto;
    }

    .img-box {
      width: 100%;
    }

    .abst__layout-row {
      flex-direction: column;
    }

    .mb_top {
      margin-top: 20px;
    }

    .mb_context {
      font-weight: bold;
      margin-bottom: 5px;
    }

    .v_span2 {
      padding-left: 0;
    }

    .tio {
      line-height: 1.3;
    }

    .icon-tog {
      text-align: center;
      display: inline-block;
      line-height: 46px;
    }

    .icon-toggle {
      font-size: 25px !important;
    }

    .title_pns {
      border-bottom: 1px solid #C8D0DC;
      padding-bottom: 10px;
    }

    .transition-box {
      position: fixed;
      right: 0;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: 9;
      background-color: rgba(0, 0, 0, .3);
    }

    .el-zoom-in-top {
      position: fixed;
      width: 80%;
      height: 100%;
      margin: 0 auto;
      background-color: #fff;
      top: 0;
      right: 0;
      z-index: 10;
    }

    .mb_nav_li {
      margin: 30px auto;
    }

    .mb_nav_li li {
      padding: 10px 15px;
      border-bottom: 1px solid #ddd;
    }

    .close {
      float: right;
      padding: 10px;

      .iconfont {
        font-size: 25px;
      }
    }
  }

  @media (max-width: 750px) {
    .v_span2 {
      display: block;
    }

    .mb_zy {
      margin-bottom: 10px !important;
    }

    .Breadcrumbs, .NavItem, .Header, .service {
      display: none;
    }

    .main-top {
      width: 100%;
      margin-left: 0 !important;
      padding-bottom: 0;
      top: 0;
    }

    .pc {
      display: none;
    }

    .mb {
      display: block;
    }

    .detail_info_title {
      margin: 15px 0;
    }

    .detail_info_last {
      margin: 15px 0;
    }

    .infos {
      margin: 10px 0 0 0;
    }

    .detail_info {
      margin-bottom: 30px;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      width: 100%;
    }

    .detail_info_first_box {
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
    }

    .detail_head_title {
      width: auto;
    }

    .img-box {
      width: 100%;
    }

    .abst__layout-row {
      flex-direction: column;
    }

    .mb_top {
      margin-top: 20px;
    }

    .mb_context {
      font-weight: bold;
      margin-bottom: 10px;
      width: 100% !important;
    }

    .v_span2 {
      padding-left: 0;
    }

    .tio {
      line-height: 1.3;
    }

    .icon-tog {
      text-align: center;
      display: inline-block;
      line-height: 46px;
    }

    .icon-toggle {
      font-size: 25px !important;
    }

    .title_pns {
      border-bottom: 1px solid #C8D0DC;
      padding-bottom: 10px;
    }

    .transition-box {
      position: fixed;
      right: 0;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: 9;
      background-color: rgba(0, 0, 0, .3);
    }

    .el-zoom-in-top {
      position: fixed;
      width: 80%;
      height: 100%;
      margin: 0 auto;
      background-color: #fff;
      top: 0;
      right: 0;
      z-index: 10;
    }

    .mb_nav_li {
      margin: 60px auto 0;
    }

    .mb_nav_li li {
      // margin-top:20px;
      padding: 20px 15px;
      border-bottom: 1px solid #ddd;
    }

    .close {
      float: right;
      // padding: 10px;
      margin-top: 25px;
      margin-right: 25px;

      .iconfont {
        font-size: 22px;
      }
    }

    .mt_btn {
      margin-top: 30px !important;
    }
  }
</style>
